<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="newDashboardItemLabel">New Dashboard Chart / View</h4>
    </div>
    <div class="modal-body">
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">Type</label>

                <div class="col-sm-10">
                    <select class="form-control" ng-options="obj.id as obj.name for obj in  controller.supportedTypes"
                            ng-model="controller.current.type" ng-change="controller.onSelectType()">
                        <option>--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Title</label>

                <div class="col-sm-10">
                    <div class="input-group">
                            <span class="input-group-addon">
                              <input type="checkbox"  ng-model="controller.current.titleVisible" ng-change="(!controller.current.titleVisible ? controller.current.title = null : void(0))" /> Visible
                            </span>
                        <input type="text" class="form-control" ng-model="controller.current.title" ng-disabled="!controller.current.titleVisible" />
                    </div>
                </div>
            </div>
            <div class="form-group" ng-show="controller.current.type != 'TEXT'">
                <label class="col-sm-2 control-label">Device(s)</label>
                <div class="col-sm-10">

                    <ui-select multiple ng-model="controller.current.monitoredDevices" theme="select2" style="width: 250px;">
                        <ui-select-match placeholder="Select device...">
                            <ol class="breadcrumb breadcrumb-device">
                                <li><i class="fa fa-sitemap"></i> ${$item.parent.title}</span></li>
                                <li><i class="fa ${$item | deviceIcon}"></i> ${$item.title}</li>
                            </ol>
                        </ui-select-match>
                        <ui-select-choices repeat="obj.id as obj in controller.devices | propsFilter: {title: $select.search}"
                                           group-by="controller.selectGroupDevices">
                            <i class="fa ${obj | deviceIcon}"></i> <span ng-bind="obj.title"></span>
                        </ui-select-choices>
                    </ui-select>


                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Real-Time</label>
                <div class="col-sm-10">
                    <div class="checkbox">
                        <input type="checkbox" id="dash-realtime" ng-model="controller.current.realtime">
                        <label for="dash-realtime">
                            Enable
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group" data-fname="period" ng-show="!controller.current.realtime">
                <label class="col-sm-2 control-label">Period</label>
                <div class="col-sm-10 form-inline">
                    <input type="number" style="width:60px" class="form-control" ng-model="controller.current.periodValue" value="1" />
                    <select ng-model="controller.current.periodType" class="form-control" style="width: 120px" >
                        <option value="MINUTE" selected="selected">Minute(s)</option>
                        <option value="HOUR">Hour(s)</option>
                        <option value="DAY">Day(s)</option>
                        <option value="WEEK">Week(s)</option>
                        <option value="MONTH">Month(s)</option>
                        <option value="RECORDS">Last Records</option>
                    </select>
                    <label>End at</label>
                    <input type="text" name="periodEnd" style="width:120px" class="form-control" ng-model="controller.current.periodEnd" placeholder="Now ..." />
                </div>
            </div>

            <div class="form-group" data-fname="aggregation">
                <label class="col-sm-2 control-label">Aggregation</label>
                <div class="col-sm-10">
                    <select ng-model="controller.current.aggregation" class="form-control" style="max-width: 200px">
                        <option value="AVERAGE">Average</option>
                        <option value="MIN">Min</option>
                        <option value="MAX">Max</option>
                        <option value="SUM">Sum</option>
                        <option value="COUNT">Count</option>
                        <option value="STANDARD_DEVIATION">Standard deviation</option>
                        <option value="NONE">None</option>
                    </select>
                </div>
            </div>

            <div class="form-group" data-fname="textON">

                <label class="col-sm-2 control-label">Labels</label>

                <div class="input-group col-sm-10">

                    <span class="input-group-addon">Text ON</span>

                    <input name="textON" class="form-control" ng-model="controller.current.viewOptions.textON"/>

                    <span class="input-group-addon">Text OFF</span>

                    <input name="textOFF" class="form-control" ng-model="controller.current.viewOptions.textOFF"/>

                </div>
            </div>

            <!-- Icons : DigitalCtrlView -->

            <div class="form-group" data-fname="iconON">
                <label class="col-sm-2 control-label">Icons</label>

                <div class="input-group col-sm-10">

                    <span class="input-group-addon"><img ng-src="/images/devices/${controller.current.viewOptions.iconON}" /></span>

                    <ui-select ng-model="controller.current.viewOptions.iconON" theme="select2"  style="width: 120px;">
                        <ui-select-match>
                            <span ng-bind="$select.selected.id"></span>
                        </ui-select-match>
                        <ui-select-choices repeat="item.id as item in (controller.deviceIcons | filter: $select.search)">
                            <img ng-src="/images/devices/${item.id}" />
                        </ui-select-choices>
                    </ui-select>

                    <span class="input-group-addon"><img ng-src="/images/devices/${controller.current.viewOptions.iconOFF}" /></span>

                    <ui-select ng-model="controller.current.viewOptions.iconOFF" theme="select2"  style="width: 120px;">
                        <ui-select-match>
                            <span ng-bind="$select.selected.id"></span>
                        </ui-select-match>
                        <ui-select-choices repeat="item.id as item in (controller.deviceIcons | filter: $select.search)">
                            <img ng-src="/images/devices/${item.id}" />
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>


            <!-- Feilds : ImageCtrlView -->

            <div class="form-group" data-fname="subtype">
                <label class="col-sm-2 control-label">Sub-Type</label>
                <div class="col-sm-10">
                    <select ng-model="controller.current.viewOptions.subtype" class="form-control" style="max-width: 200px">

                        <option value="IMAGE" ng-if="controller.current.type == 'IMAGE_CONTROLLER'">Image</option>
                        <option value="VIDEO" ng-if="controller.current.type == 'IMAGE_CONTROLLER'">Video</option>

                        <option value="NORMAL" ng-if="controller.current.type == 'GAUGE_CHART'">Default</option>
                        <option value="SOLID" ng-if="controller.current.type == 'GAUGE_CHART'">Slice</option>
                    </select>
                </div>
            </div>

            <div class="form-group" data-fname="path">
                <label class="col-sm-2 control-label">URL</label>
                <div class="col-sm-10">
                    <input name="path" class="form-control"  ng-model="controller.current.viewOptions.path" />
                </div>
            </div>

            <!---------------- advancedOptionsBar ------------------------->

            <div class="advancedOptionsBar" ng-click="advancedOptions = !advancedOptions">
                Advanced <i class="fa fa-fw fa-cog"></i>
            </div>
            <br/>

            <div class="advancedOptions" ng-show="advancedOptions">

                <div class="form-group" ng-show="!controller.current.realtime">
                    <label class="col-sm-2 control-label">Group</label>
                    <div class="col-sm-10">
                        <input type="number" style="width:60px" class="form-control" ng-model="controller.current.itemGroup" value="0" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">Range</label>
                    <div class="col-sm-10 form-inline">
                        <input type="number" style="width:80px" placeholder="min" class="form-control" ng-model="controller.current.viewOptions.min" value="0" />
                        <input type="number" style="width:80px" placeholder="max" class="form-control" ng-model="controller.current.viewOptions.max" value="0" />
                        (Chart options)
                    </div>
                </div>

            </div>

        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" >Save changes</button>
    </div>
</div>